<template>
  <div id="EconomicTradeExchange">
    <div class="list-div" v-if="show">
      <ul class="list-ul">
         <li v-for="(item, index) in news_list" :key="'finacial_' + index">
           <router-link :to="{path:'/EconomicTrade/EconomicTradeExchange/NewsInfo', query:item}" class="news-link">
              <span v-html="item.title" :title="item.title"></span>
           </router-link>
           <span>【{{item.createDate | getTime}}】</span>
         </li>
       </ul>
     </div>
     <div class="pageInfo">
        <Page class="page-list" :total="countNum" show-total :current="curPageIndex" :page-size="pageSize" @on-change="changeHandle"></Page>
     </div>
     <router-view></router-view>
  </div>
 </template>

<script>
  //import NewsNode from '../common/NewsNode'
  import baseConfig from "../../publicLib/baseConfig/baseConfig";
  import {Storage} from '../../publicLib/utils-lib/main'

   let localStorage = new Storage('localStorage');

  export default {
    name: 'EconomicTradeExchange',
    data () {
      return {
        news_list:[],//baseConfig.jmtd.newsList,
        show: true,
        curPageIndex: 1,
        countPage: 10,
        countNum: 10,
        pageSize: 4,
        show: true
      }
    },
    filters: {
       getTime: function (value) {
         return value.split(' ')[0]
       }
    },
    watch:{
      $route (to, from) {
        if (to.name === 'EconomicTradeExchange') {
          this.show = true;
        }else {
          this.show = false;
        }

        // 缓存当前页
        localStorage.setItem('EconomicTradeExchangeShow', this.show)
      }
    },
     methods: {
        getNewsList (index) {
          this.$fetch('newslist', {newstypes: '12',pageNo: index})
            .then(response => {
                //成功获取服务器数据
                if (response.code === "200") {
                  let data = response.data;
                  this.curPageIndex = data.pageNo;
                  this.countPage = data.page_num;
                  this.countNum = data.count;
                  this.pageSize = data.pageSize;

                  this.news_list = [];
                  let ary = data.list;
                  let len = ary.length;

                  for (let i = 0; i < len; i++) {
                    this.news_list.push(ary[i]);
                  }
                }
              }
            )
        },
        /* 分页改变事件 */
        changeHandle (curIndex) {
           this.curPageIndex = curIndex;
           this.getNewsList(curIndex);
        }
     },
     mounted () {
       this.getNewsList(this.curPageIndex);
        /* 如果现实的是详情页面，刷新浏览器仍然显示详情页 */
        let show = localStorage.getItem('EconomicTradeExchangeShow');

          if (show === 'false') {
            this.show = false;
          }
        },
        destroyed () {
            localStorage.removeItem('EconomicTradeExchangeShow')
         }
  }
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

#EconomicTradeExchange{
   width: 100%;
   font-size: 1rem;

    .list-div{
      width: 95%;
      margin: 0 auto;
      text-align: left;
      font-size: 1rem;

      .list-ul{
        margin: 2rem 0;

        li{
          width: 90%;
          line-height: 2rem;
          border-bottom: #D6D6D6 0.09rem dashed;
          list-style-type: square;

          .news-link{
            span{
              width: 80%;
              display: block;
              color: $data-detail-font-color;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              float: left;
            }
          }

          &:hover{
            cursor: pointer;

            span, a{
              color: $default-layout-color;
            }
          }
        }

        span{
          float: right;
        }
      }
    }

   .pageInfo{
     .page-list{
       float: right;
       margin-right: 1rem;
     }
   }
 }
</style>
